<template>
  <div class="user-login">
    <div class="login-title">
      <h3>还不赶紧登录</h3>
    </div>
    <div class="login-box">
      <div class="login-form border">
        <el-tabs v-model="activeName" stretch @tab-click="handleClick">
          <el-tab-pane label="注册" name="register">
            <form action="" method="post">
              <div class="input-form">
                <el-input placeholder="请输入手机号码" v-model="formRegiter.name"
                          type="text"
                          clearable>
                  <svg class="icon" aria-hidden="true" slot="prefix">
                    <use xlink:href="#icon-shouji"></use>
                  </svg>
                </el-input>
                <el-input placeholder="请输入密码" v-model="formRegiter.password"
                          type="password" clearable>
                  <svg class="icon" aria-hidden="true" slot="prefix">
                    <use xlink:href="#icon-suo"></use>
                  </svg>
                </el-input>
                <el-input placeholder="请确认密码" v-model="formRegiter.comfirmPwd"
                          type="password" clearable>
                  <svg class="icon" aria-hidden="true" slot="prefix">
                    <use xlink:href="#icon-lock"></use>
                  </svg>
                </el-input>
                <el-button type="submit" class="register-btn">注册</el-button>
              </div>
            </form>
          </el-tab-pane>
          <el-tab-pane label="登录" name="login">
            <form action="" method="post">
              <div class="input-form">
                <el-input placeholder="请输入手机号码" v-model="formLogin.name"
                          type="text"
                          clearable>
                  <svg class="icon" aria-hidden="true" slot="prefix">
                    <use xlink:href="#icon-shouji"></use>
                  </svg>
                </el-input>
                <el-input placeholder="请输入密码" v-model="formLogin.password"
                          type="password" clearable>
                  <svg class="icon" aria-hidden="true" slot="prefix">
                    <use xlink:href="#icon-suo"></use>
                  </svg>
                </el-input>
                <el-button type="submit" class="login-btn">登录</el-button>
              </div>
            </form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="footer-bg">
    </div>
  </div>
</template>

<script>
    export default {
      name: "login",
      data () {
        return {
          labelPosition: 'right',
          formLogin: {
            name: '',
            password: '',
            type: '',
          },
          formRegiter: {
            name: '',
            password: '',
            comfirmPwd: '',
            type: '',
          },
          activeName: 'login'
        }
      },
      methods: {
        handleClick() {
          console.log('hello world')
        }
      }
    }
</script>

<style  lang="stylus" scoped>
  .login-form >>>.input-form .el-input--prefix .el-input__inner
    padding-left: 40px
    background: #fdfdfd;
  .login-form >>>.el-input .el-input__prefix
    left: 3%;
    line-height: 45px;
  .login-form >>>.el-input .el-input__prefix .icon
    font-size: 20px
  .user-login
    padding: 0 15px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fafafa;
    .footer-bg
      position: fixed
      left: 0
      right: 0
      bottom: 0
      height: 0
      padding-top: 31.28%
      overflow: hidden;
      background: url("http://pic.soutu123.cn/back_pic/00/02/64/225619d9ce0bea3.jpg")
      background-size: cover
      background-repeat: no-repeat
      background-position: center center
  .login-title
    padding: 2rem 0;
  .login-title h3
    margin: 0;
    text-align: center;
  .login-form
    padding: 10px 15px;
    background: #f6f6f6;
    &:before
      border-radius: 15px;
      border-color: #e5e5e5;
    .el-input
      margin: 10px 0;
  .input-form
    margin: 20px 0;
    p
      margin: 0;
      font-size: 14px;
      padding-top: 5px;
      span
        text-decoration: underline;
        color: #f14a4a;
        padding-left: .1rem
    .login-btn, .register-btn
      width: 100%;
      margin-top: 15px;
      color: #fff;
    .login-btn
      background-color: #409EFF;
      border-color: #409EFF;
    .register-btn
      background-color: #40ffdc;
      border-color: #40ffdc
</style>
